<template>
  <div class="ai-customer-service">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <div class="title-icon-wrapper">
            <el-icon class="title-icon"><Star /></el-icon>
          </div>
          <div class="title-text">
            <h1 class="page-title">MES AI智能客服</h1>
            <p class="page-description">专业的MES系统智能助手，为您提供7x24小时专业服务</p>
          </div>
        </div>
      </div>
      <div class="header-actions">
        <el-button 
          type="danger" 
          :icon="Delete" 
          @click="clearChat"
          :disabled="messages.length === 0"
          plain
          round
        >
          清空聊天
        </el-button>
        <el-button 
          type="primary"
          :icon="Refresh" 
          @click="refreshService"
          :loading="isHealthChecking"
          round
        >
          刷新服务
        </el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 聊天容器 -->
      <div class="chat-container">
      <!-- 聊天消息区域 -->
      <div class="chat-messages" ref="messagesContainer">
                  <!-- 欢迎消息 -->
        <div v-if="messages.length === 0" class="welcome-message">
          <div class="welcome-content">
            <div class="welcome-animation">
              <div class="floating-icon">
                <el-icon class="welcome-icon"><Message /></el-icon>
              </div>
            </div>
            <h3 class="welcome-title">您好！我是MES系统的AI智能客服助手</h3>
            <p class="welcome-subtitle">我可以帮助您：</p>
            <div class="feature-cards">
              <div class="feature-card" v-for="(feature, index) in features" :key="index">
                <el-icon class="feature-icon" :style="{ color: feature.color }">
                  <component :is="feature.icon" />
                </el-icon>
                <span class="feature-text">{{ feature.text }}</span>
              </div>
            </div>
            <div class="welcome-tip">
              <el-icon><Sunny /></el-icon>
              <span>请输入您的问题，我将竭诚为您服务！</span>
            </div>
          </div>
        </div>

        <!-- 消息列表 -->
        <div 
          v-for="(message, index) in messages" 
          :key="index" 
          class="message-item"
          :class="{ 'user-message': message.role === 'user', 'ai-message': message.role === 'assistant' }"
        >
          <div class="message-avatar">
            <el-avatar 
              :size="40" 
              :src="message.role === 'user' ? userAvatar : aiAvatar"
              :icon="message.role === 'user' ? User : Avatar"
            />
          </div>
          <div class="message-content">
            <div class="message-header">
              <span class="message-sender">
                {{ message.role === 'user' ? '您' : 'MES AI助手' }}
              </span>
              <span class="message-time">{{ formatTime(message.timestamp) }}</span>
            </div>
            <div class="message-text" v-html="formatMessageContent(message.content)"></div>
            <!-- AI消息的额外信息 -->
            <div v-if="message.role === 'assistant' && message.usage" class="message-meta">
              <el-tag size="small" type="info">
                Token: {{ message.usage.totalTokens }}
              </el-tag>
            </div>
          </div>
        </div>

        <!-- 加载状态 -->
        <div v-if="isLoading" class="message-item ai-message">
          <div class="message-avatar">
                          <el-avatar :size="40" :icon="Avatar" />
          </div>
          <div class="message-content">
            <div class="typing-indicator">
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="typing-text">AI助手正在思考中...</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="chat-input-area">
        <!-- 智能推荐 -->
        <div v-if="allSuggestions.length > 0" class="suggested-replies">
          <div class="suggestions-header">
            <el-icon class="suggestions-icon"><Sunny /></el-icon>
            <span class="suggestions-title">
              {{ messages.length === 0 ? '智能推荐问题' : '智能推荐回复' }}
            </span>
            <el-tag 
              v-if="messages.length === 0" 
              size="small" 
              type="success" 
              effect="light"
            >
              热门问题
            </el-tag>
          </div>
          <div class="suggestions-list">
            <div
              v-for="(suggestion, index) in allSuggestions"
              :key="index"
              class="suggestion-item"
              @click="sendMessage(suggestion)"
            >
              <el-icon><ChatLineSquare /></el-icon>
              <span class="suggestion-text">{{ suggestion }}</span>
              <el-icon class="suggestion-arrow"><Right /></el-icon>
            </div>
          </div>
        </div>

        <!-- 输入框 -->
        <div class="input-container">
          <div class="input-wrapper">
            <el-input
              v-model="inputMessage"
              type="textarea"
              :rows="1"
              :autosize="{ minRows: 1, maxRows: 4 }"
              placeholder="请输入您的问题..."
              @keydown.ctrl.enter="handleSendMessage"
              :disabled="isLoading"
              class="message-input"
              resize="none"
            />
            <div class="input-actions">
              <el-button
                type="primary"
                :icon="Promotion"
                @click="handleSendMessage"
                :loading="isLoading"
                :disabled="!inputMessage.trim()"
                class="send-button"
                round
              >
                发送
              </el-button>
            </div>
          </div>
          <div class="input-footer">
            <div class="input-tips">
              <span class="tip-item">
                <el-icon><Key /></el-icon>
                Ctrl + Enter 发送
              </span>
              <span class="tip-item">
                <el-icon><Connection /></el-icon>
                会话: {{ sessionId.slice(-8) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

      <!-- 侧边栏信息 -->
      <div class="sidebar">
        <!-- 服务状态卡片 -->
        <div class="status-card">
          <div class="status-header">
            <el-icon><Monitor /></el-icon>
            <span>服务状态</span>
          </div>
          <div class="status-content">
            <div class="status-indicator" :class="{ 'online': isServiceOnline, 'offline': !isServiceOnline }">
              <div class="status-dot"></div>
              <span class="status-text">{{ isServiceOnline ? '服务正常' : '服务离线' }}</span>
            </div>
            <div class="status-details">
              <div class="detail-item">
                <span class="detail-label">响应时间</span>
                <span class="detail-value">{{ isServiceOnline ? '< 2s' : '--' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">消息数量</span>
                <span class="detail-value">{{ messages.length }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 功能卡片 -->
        <div class="feature-card-sidebar">
          <div class="feature-header">
            <el-icon><Tools /></el-icon>
            <span>AI能力</span>
          </div>
          <div class="capability-list">
            <div class="capability-item" v-for="capability in capabilities" :key="capability.name">
              <el-icon :style="{ color: capability.color }">
                <component :is="capability.icon" />
              </el-icon>
              <div class="capability-content">
                <span class="capability-name">{{ capability.name }}</span>
                <span class="capability-desc">{{ capability.desc }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, computed, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Star, 
  Delete, 
  Refresh, 
  Message, 
  Avatar, 
  User, 
  Promotion, 
  Key, 
  Connection,
  ChatLineSquare,
  DataAnalysis,
  Setting,
  Monitor,
  TrendCharts,
  Timer,
  Check,
  Warning,
  Sunny,
  Tools,
  ChatDotRound,
  QuestionFilled,
  Right
} from '@element-plus/icons-vue'
import { useAiChatStore } from '@/stores/aiChat'
import type { ChatMessage } from '@/api/aiCustomerService'

// 使用Pinia store
const chatStore = useAiChatStore()

// 本地响应式数据
const inputMessage = ref('')
const isHealthChecking = ref(false)
const messagesContainer = ref<HTMLElement>()

// 计算属性
const messages = computed(() => chatStore.messages)
const isLoading = computed(() => chatStore.isLoading)
const isServiceOnline = computed(() => chatStore.isServiceOnline)
const sessionId = computed(() => chatStore.sessionId)
const suggestedReplies = computed(() => chatStore.suggestedReplies)

// 功能特性数据
const features = ref([
  { icon: QuestionFilled, text: '解答MES系统相关问题', color: '#409EFF' },
  { icon: Setting, text: '提供操作指导和帮助', color: '#67C23A' },
  { icon: Warning, text: '协助处理系统故障', color: '#E6A23C' },
  { icon: TrendCharts, text: '分享最佳实践经验', color: '#F56C6C' }
])

// AI能力数据
const capabilities = ref([
  { name: '智能问答', desc: '快速准确回答', icon: QuestionFilled, color: '#409EFF' },
  { name: '上下文记忆', desc: '记住对话内容', icon: ChatDotRound, color: '#67C23A' },
  { name: '意图识别', desc: '理解用户需求', icon: TrendCharts, color: '#E6A23C' },
  { name: '推荐回复', desc: '智能建议回复', icon: Sunny, color: '#F56C6C' }
])

// 初始智能推荐问题
const initialSuggestions = ref([
  '如何进行生产计划管理？',
  'MES系统如何进行工艺管理？',
  '质量管理模块怎么使用？',
  '设备管理有哪些功能？',
  '如何查看生产进度？',
  '系统出现故障怎么办？',
  '如何导出生产报表？',
  '用户权限如何设置？'
])

// 合并的推荐列表
const allSuggestions = computed(() => {
  // 如果没有聊天记录，显示初始推荐
  if (messages.value.length === 0) {
    return initialSuggestions.value
  }
  // 如果有聊天记录，优先显示AI生成的推荐，如果没有则显示部分初始推荐
  return suggestedReplies.value.length > 0 
    ? suggestedReplies.value 
    : initialSuggestions.value.slice(0, 4)
})

// 用户头像和AI头像
const userAvatar = computed(() => {
  // 可以从用户信息中获取头像，这里使用默认
  return ''
})

const aiAvatar = computed(() => {
  // AI助手头像
  return ''
})

// 格式化时间
const formatTime = (timestamp: string | Date) => {
  const date = new Date(timestamp)
  return date.toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit' 
  })
}

// 格式化消息内容
const formatMessageContent = (content: string) => {
  // 处理换行
  let formatted = content.replace(/\n/g, '<br>')
  
  // 处理代码块
  formatted = formatted.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
  
  // 处理行内代码
  formatted = formatted.replace(/`([^`]+)`/g, '<code>$1</code>')
  
  // 处理加粗
  formatted = formatted.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
  
  return formatted
}

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

// 发送消息
const sendMessage = async (message?: string) => {
  const messageText = message || inputMessage.value.trim()
  if (!messageText) return

  try {
    // 清空输入框
    if (!message) {
      inputMessage.value = ''
    }
    
    // 滚动到底部
    scrollToBottom()
    
    // 使用store发送消息
    const response = await chatStore.sendMessage(messageText)
    
    if (response) {
      // 获取智能推荐（异步执行，不阻塞UI）
      chatStore.getSuggestedReplies(response.reply)
    }
    
  } catch (error: any) {
    console.error('发送消息失败:', error)
    ElMessage.error(error.message || '发送消息失败，请重试')
  } finally {
    scrollToBottom()
  }
}

// 处理发送消息
const handleSendMessage = () => {
  sendMessage()
}

// 清空聊天
const clearChat = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要清空所有聊天记录吗？此操作不可恢复。',
      '确认清空',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    chatStore.clearMessages()
    ElMessage.success('聊天记录已清空')
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('清空聊天记录失败:', error)
      ElMessage.error('清空聊天记录失败')
    }
  }
}

// 刷新服务
const refreshService = async () => {
  isHealthChecking.value = true
  try {
    const isHealthy = await chatStore.checkServiceHealth()
    
    if (isHealthy) {
      ElMessage.success('服务状态正常')
    } else {
      ElMessage.warning('服务暂时不可用')
    }
  } catch (error) {
    console.error('健康检查失败:', error)
    ElMessage.error('服务连接失败')
  } finally {
    isHealthChecking.value = false
  }
}

// 初始化
onMounted(async () => {
  await chatStore.initializeChat()
  chatStore.startHealthCheck()
  await refreshService()
})

// 清理
onUnmounted(() => {
  chatStore.stopHealthCheck()
})
</script>

<style scoped>
.ai-customer-service {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  position: relative;
  overflow: hidden;
}

.page-header {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 10;
}

.header-content {
  flex: 1;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.title-icon-wrapper {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #4a90e2, #357abd);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(74, 144, 226, 0.3);
  animation: pulse 2s infinite;
}

.title-icon {
  color: white;
  font-size: 28px;
}

.title-text {
  flex: 1;
}

.page-title {
  margin: 0 0 4px 0;
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  background: linear-gradient(135deg, #2c3e50, #667eea);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-description {
  margin: 0;
  color: #7f8c8d;
  font-size: 15px;
  font-weight: 400;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.main-content {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(102, 126, 234, 0.3);
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(102, 126, 234, 0.5);
}

.welcome-message {
  text-align: center;
  padding: 40px 20px;
  color: #5a6c7d;
}

.welcome-content {
  max-width: 600px;
  margin: 0 auto;
}

.welcome-animation {
  margin-bottom: 32px;
}

.floating-icon {
  display: inline-block;
  animation: float 3s ease-in-out infinite;
}

.welcome-icon {
  font-size: 72px;
  color: #667eea;
  filter: drop-shadow(0 8px 16px rgba(102, 126, 234, 0.3));
}

.welcome-title {
  margin: 0 0 16px 0;
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  background: linear-gradient(135deg, #2c3e50, #667eea);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.welcome-subtitle {
  margin: 0 0 24px 0;
  font-size: 16px;
  color: #7f8c8d;
  font-weight: 500;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.feature-card {
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border-color: rgba(102, 126, 234, 0.2);
}

.feature-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.feature-text {
  font-size: 15px;
  color: #2c3e50;
  font-weight: 500;
}

.welcome-tip {
  margin-top: 32px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  border-radius: 12px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  color: #667eea;
}

.message-wrapper {
  margin-bottom: 24px;
  animation: fadeInUp 0.4s ease;
}

.user-wrapper {
  animation: slideInRight 0.4s ease;
}

.ai-wrapper {
  animation: slideInLeft 0.4s ease;
}

.message-item {
  display: flex;
  gap: 16px;
}

.user-wrapper .message-item {
  flex-direction: row-reverse;
}

.message-avatar {
  flex-shrink: 0;
}

.avatar-container {
  position: relative;
  transition: all 0.3s ease;
}

.avatar-container:hover {
  transform: scale(1.05);
}

.user-avatar {
  filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.3));
}

.ai-avatar {
  filter: drop-shadow(0 4px 12px rgba(74, 144, 226, 0.3));
}

.avatar-status {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #2ecc71;
  border: 2px solid white;
  border-radius: 50%;
}

.avatar-status.loading {
  background: #f39c12;
  animation: pulse-dot 1s infinite;
}

.message-content {
  flex: 1;
  max-width: calc(100% - 120px);
}

.message-bubble {
  padding: 16px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
}

.message-bubble:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.user-bubble {
  background: linear-gradient(135deg, #4a90e2, #357abd);
  color: white;
  margin-left: 40px;
}

.user-bubble::before {
  content: '';
  position: absolute;
  top: 12px;
  right: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid #667eea;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.ai-bubble {
  background: white;
  border: 1px solid rgba(102, 126, 234, 0.15);
  color: #2c3e50;
  margin-right: 40px;
}

.ai-bubble::before {
  content: '';
  position: absolute;
  top: 12px;
  left: -8px;
  width: 0;
  height: 0;
  border-right: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.typing-bubble {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.message-sender {
  font-weight: 600;
  font-size: 14px;
}

.user-bubble .message-sender {
  color: rgba(255, 255, 255, 0.95);
}

.ai-bubble .message-sender {
  color: #667eea;
}

.message-time {
  font-size: 12px;
  opacity: 0.7;
}

.message-text {
  line-height: 1.6;
  word-wrap: break-word;
}

.message-text :deep(pre) {
  background: rgba(0, 0, 0, 0.05);
  padding: 12px;
  border-radius: 8px;
  margin: 8px 0;
  overflow-x: auto;
}

.message-text :deep(code) {
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}

.user-message .message-text :deep(pre),
.user-message .message-text :deep(code) {
  background: rgba(255, 255, 255, 0.2);
}

.message-meta {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #667eea;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

.typing-text {
  color: #7f8c8d;
  font-style: italic;
}

.chat-input-area {
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid rgba(102, 126, 234, 0.1);
  padding: 24px;
  backdrop-filter: blur(10px);
}

.suggested-replies {
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
  border-radius: 16px;
  border: 1px solid rgba(102, 126, 234, 0.15);
}

.suggestions-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: space-between;
}

.suggestions-icon {
  color: #667eea;
  font-size: 18px;
  animation: pulse 2s infinite;
}

.suggestions-title {
  color: #667eea;
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  margin-left: 8px;
}

.suggestions-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: white;
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 14px;
  color: #667eea;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.suggestion-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.5s;
}

.suggestion-item:hover::before {
  left: 100%;
}

.suggestion-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-color: #667eea;
}

.suggestion-text {
  flex: 1;
  text-align: left;
}

.suggestion-arrow {
  font-size: 16px;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.suggestion-item:hover .suggestion-arrow {
  opacity: 1;
  transform: translateX(4px);
}

.input-container {
  position: relative;
}

.input-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding: 16px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(102, 126, 234, 0.15);
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  border-color: #667eea;
  box-shadow: 0 6px 24px rgba(102, 126, 234, 0.2);
  transform: translateY(-1px);
}

.message-input {
  flex: 1;
}

.message-input :deep(.el-textarea__inner) {
  border: none;
  border-radius: 8px;
  background: rgba(102, 126, 234, 0.05);
  transition: all 0.3s ease;
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 16px;
}

.message-input :deep(.el-textarea__inner):focus {
  background: rgba(102, 126, 234, 0.08);
  box-shadow: none;
}

.message-input :deep(.el-textarea__inner)::placeholder {
  color: #95a5a6;
  font-style: italic;
}

.send-button {
  flex-shrink: 0;
  height: 40px;
  padding: 0 24px;
  font-weight: 600;
}

.input-footer {
  display: flex;
  justify-content: center;
}

.input-tips {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #7f8c8d;
  font-size: 12px;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 8px;
  color: #667eea;
  font-weight: 500;
}

.sidebar {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-card,
.feature-card-sidebar {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.status-header,
.feature-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.status-indicator.online {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(46, 204, 113, 0.05));
  border: 1px solid rgba(46, 204, 113, 0.2);
}

.status-indicator.offline {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(231, 76, 60, 0.05));
  border: 1px solid rgba(231, 76, 60, 0.2);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

.status-indicator.online .status-dot {
  background: #2ecc71;
}

.status-indicator.offline .status-dot {
  background: #e74c3c;
}

.status-text {
  font-weight: 500;
  font-size: 14px;
}

.status-indicator.online .status-text {
  color: #27ae60;
}

.status-indicator.offline .status-text {
  color: #c0392b;
}

.status-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.detail-label {
  font-size: 13px;
  color: #7f8c8d;
}

.detail-value {
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
}

.capability-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.capability-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
}

.capability-item:hover {
  transform: translateX(4px);
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.2);
}

.capability-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.capability-name {
  font-weight: 500;
  font-size: 14px;
  color: #2c3e50;
}

.capability-desc {
  font-size: 12px;
  color: #7f8c8d;
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
  }
  50% {
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5), 0 0 0 8px rgba(102, 126, 234, 0.1);
  }
  100% {
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-content {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    flex-direction: row;
    gap: 16px;
  }
  
  .status-card,
  .feature-card-sidebar {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 16px 20px;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .title-section {
    gap: 12px;
  }
  
  .title-icon-wrapper {
    width: 48px;
    height: 48px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .main-content {
    padding: 16px;
    gap: 16px;
  }
  
  .chat-container {
    border-radius: 16px;
  }
  
  .sidebar {
    flex-direction: column;
    gap: 12px;
  }
  
  .user-bubble {
    margin-left: 20px;
  }
  
  .ai-bubble {
    margin-right: 20px;
  }
  
  .feature-cards {
    grid-template-columns: 1fr;
  }
  
  .input-wrapper {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .send-button {
    width: 100%;
  }
  
  .input-tips {
    justify-content: center;
    gap: 12px;
  }
  
  .suggestions-list {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 12px 16px;
  }
  
  .main-content {
    padding: 12px;
  }
  
  .chat-messages {
    padding: 16px;
  }
  
  .chat-input-area {
    padding: 16px;
  }
  
  .input-wrapper {
    padding: 12px;
  }
  
  .welcome-content {
    padding: 0 16px;
  }
  
  .feature-card {
    padding: 16px;
  }
}
</style> 